Introduction to Jetpack Compose and Declarative UI

Course: Android App Development

Topic: Introduction to Jetpack Compose and Declarative UI

Course Link: Android App Development Course – JustAcademy

Demo Link: Register for a Course Demo

Official Documentation: Get Started with Jetpack Compose

1. Introduction to Jetpack Compose

Jetpack Compose is Google's modern toolkit for building native Android user interfaces. It allows developers to create screens using Kotlin code instead of describing every interface element in XML layout files and manually updating views.

Jetpack Compose follows a declarative UI approach. Developers describe what the interface should look like for the current application state, and Compose updates the interface when relevant state changes.

For example, consider a screen containing a counter and an increment button. In a traditional XML-based interface, a developer typically finds the TextView and manually changes its displayed text when the button is clicked. With Compose, the developer stores the counter in observable state and displays that state in a Text composable. When the state changes, Compose schedules the necessary UI update.

Jetpack Compose supports common interface elements such as text, buttons, images, input fields, lists, navigation, animations, and Material Design components. It can be used to build small applications as well as complex, multi-screen Android applications.

Key characteristics of Jetpack Compose

• Uses Kotlin to describe user interfaces.
• Builds interfaces from reusable composable functions.
• Uses a declarative programming model.
• Updates the UI through recomposition when observed state changes.
• Provides flexible layout and styling APIs through Modifier and layout composables.
• Supports Material Design components and themes.
• Works with Android architecture components such as ViewModel and lifecycle-aware state collection.
• Can coexist with traditional Android Views in existing applications.

2. What Is Declarative UI?

A declarative user interface describes what should be displayed for a particular state rather than specifying every step required to create, modify, hide, or remove each interface element.

Suppose an application displays a welcome message. When the user enters a name, the message should update to include that name. In a declarative approach, the UI is defined as a function of the current state. When the state changes, the framework recalculates the relevant UI description.

Example of the declarative concept

@Composable
fun WelcomeMessage(name: String) {
    Text(text = "Welcome, $name!")
}

The composable receives a name and displays a message based on that value. Calling it with a different name results in a different UI description.

For example:

WelcomeMessage(name = "Amit")

Displays:

Welcome, Amit!

When called with another name, the displayed message changes accordingly. Compose manages the work needed to reconcile the interface with the new state.

3. Imperative UI vs. Declarative UI

Android developers should understand both approaches because many existing Android applications use XML layouts and View-based code, while Jetpack Compose uses declarative Kotlin functions.

Imperative example using a traditional View

// Example inside an Activity using a TextView
val messageTextView = findViewById<TextView>(R.id.messageTextView)
messageTextView.text = "Welcome to Android"

The code directly finds a view and modifies its text property.

Declarative example using Compose

@Composable
fun WelcomeScreen() {
    Text(text = "Welcome to Android")
}

The composable describes the desired text. If the text depends on state, Compose can update the rendered interface when that state changes.

4. What Is a Composable Function?

A composable function is a Kotlin function that describes a part of the user interface. It is marked with the @Composable annotation, which tells the Compose compiler that the function participates in composition.

Composable functions can represent simple elements such as a label or button, or more complex sections such as a login form, dashboard, product card, or complete screen.

Basic composable example

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun Greeting() {
    Text(text = "Hello, Android Developer!")
}

Explanation

• @Composable identifies the function as a composable.
• fun Greeting() declares a Kotlin function named Greeting.
• Text() displays text in the interface.
• The function can be called from another composable to include the greeting in a screen.

Composable functions should generally be designed to describe UI and emit events rather than directly perform unrelated operations such as database writes or network requests during composition.

5. Creating a Simple Compose Application

A typical Compose-enabled Android project contains an Activity that hosts composable content. In a new project created with a suitable Android Studio Compose template, the required Gradle configuration and dependencies are usually generated automatically.

Example using ComponentActivity

package com.example.composeintro

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Surface {
                    HomeScreen()
                }
            }
        }
    }
}

@Composable
fun HomeScreen() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Welcome to Jetpack Compose")
        Text(text = "Build Android UIs with Kotlin.")
    }
}

How the code works

1. MainActivity is the Android Activity that hosts the interface.
2. onCreate() is called when the Activity is created.
3. setContent { } establishes the Compose content for the Activity.
4. MaterialTheme provides Material Design theme values to its descendants.
5. Surface provides a Material surface for the screen content.
6. HomeScreen() describes the screen using composable functions.
7. Column places its child composables vertically.
8. Modifier.padding(16.dp) adds spacing around the column's content.

Note: The exact theme wrapper in your project may be a generated application theme such as MyApplicationTheme. Use the theme and dependency configuration generated for your project where appropriate.

6. Understanding the Main Compose Building Blocks

Jetpack Compose provides several core components that developers combine to build interfaces.

7. Understanding Modifier

Modifier is an important Compose API used to configure the layout, appearance, interaction, and other behavior of composables. It can add padding, set a size, change alignment, handle clicks, or apply a background.

Example

@Composable
fun StyledMessage() {
    Text(
        text = "Learn Jetpack Compose",
        modifier = Modifier.padding(16.dp)
    )
}

This example adds 16dp of padding around the Text composable.

Common Modifier operations

Example using multiple modifiers

Text(
    text = "Android Development",
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .background(Color.LightGray)
)

Modifier order matters because modifiers are applied in sequence. For example, applying padding before or after a background can produce different visual results.

8. Understanding Composition and Recomposition

Composition is the process through which Compose executes composable functions to build a description of the UI. The first time the content is composed is called the initial composition.

Recomposition occurs when Compose re-executes composable functions whose observed inputs or state may have changed. Compose uses the updated information to reconcile the UI with the new state.

Example: Updating a counter

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

@Composable
fun CounterScreen() {
    var count by remember { mutableIntStateOf(0) }

    Column {
        Text(text = "Count: $count")

        Button(onClick = { count++ }) {
            Text(text = "Increase")
        }
    }
}

How it works

1. Initially, the count is 0.
2. The Text composable displays the current count.
3. The user taps the Increase button.
4. The click handler increments the state value.
5. Compose observes the state change and schedules recomposition for affected UI.
6. The updated Text displays the new count.

The developer does not manually locate the Text view and replace its displayed value. The displayed UI follows the state.

9. Introduction to State in Compose

State is information that can change over time and influence what the application displays. Examples include a counter value, a user's entered name, a selected tab, whether a dialog is visible, or the loading status of a network request.

Compose uses observable state APIs to determine when a composable that reads a state value may need recomposition.

Important state APIs

Example: Name input with state

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

@Composable
fun NameScreen() {
    var name by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(
            value = name,
            onValueChange = { newValue ->
                name = newValue
            },
            label = { Text("Enter your name") }
        )

        Text(text = "Hello, $name")
    }
}

The text field displays the current value of name. When the user types, onValueChange provides a proposed new value, and the code updates the state. The greeting then reflects the updated name.

10. Understanding remember and rememberSaveable

Both APIs help retain state, but they have different responsibilities.

Example with rememberSaveable

import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberSaveable
import androidx.compose.runtime.setValue

@Composable
fun SearchScreen() {
    var query by rememberSaveable { mutableStateOf("") }

    OutlinedTextField(
        value = query,
        onValueChange = { query = it },
        label = { Text("Search courses") }
    )
}

Use saved state for small UI values. Larger application data, such as a complete list of courses or downloaded records, should generally be stored or reloaded through an appropriate data source rather than placed entirely in saved instance state.

11. Creating Reusable Composable Components

One of the advantages of Compose is that developers can split a screen into smaller reusable functions. This makes code easier to understand, test, and maintain.

Example: Reusable course card

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CourseCard(
    title: String,
    description: String
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = title)
            Text(text = description)
        }
    }
}

The same component can be reused with different course titles and descriptions.

@Composable
fun CourseList() {
    Column(modifier = Modifier.padding(16.dp)) {
        CourseCard(
            title = "Android Development",
            description = "Learn native Android app development."
        )

        CourseCard(
            title = "Kotlin Programming",
            description = "Understand Kotlin syntax and programming concepts."
        )
    }
}

For a small fixed number of items, Column may be sufficient. For a large or dynamically sized collection, use LazyColumn or LazyVerticalGrid to avoid composing every item at once.

12. Handling User Interaction

Declarative interfaces still need to respond to user actions. Compose components expose callbacks that allow the application to handle clicks, text input, selections, and other events.

Example: Button click

import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun SubmitButton() {
    Button(
        onClick = {
            // Handle the submit action here.
        }
    ) {
        Text(text = "Submit")
    }
}

The onClick callback runs when the button is activated. In a real application, the callback may validate a form, call a ViewModel, or trigger navigation.

Example: Toggle a message

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

@Composable
fun ToggleMessageScreen() {
    var visible by remember { mutableStateOf(false) }

    Column {
        Button(onClick = { visible = !visible }) {
            Text("Toggle Message")
        }

        if (visible) {
            Text("The message is now visible.")
        }
    }
}

When the button changes the state, the conditional composable is included or omitted from the Composition. Compose updates the rendered interface to reflect that state.

13. Introduction to Material Design in Compose

Material Design provides components and visual guidelines that help developers create consistent Android interfaces. Compose includes Material 3 components such as Button, Card, TextField, TopAppBar, and Scaffold.

Example: Material 3 screen

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun DashboardScreen() {
    MaterialTheme {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("My Dashboard") }
                )
            }
        ) { innerPadding ->
            Column(modifier = Modifier.padding(innerPadding)) {
                Text(
                    text = "Welcome back",
                    style = MaterialTheme.typography.headlineSmall
                )

                Button(onClick = { }) {
                    Text("View Courses")
                }
            }
        }
    }
}

Depending on the Material 3 library version, TopAppBar may require an experimental API opt-in. Follow the API requirements shown by the Compose version used in your project.

14. Setting Up Jetpack Compose in Android Studio

The easiest way to begin is to create a new Android project using an Android Studio template that supports Jetpack Compose.

Setup steps

1. Install a compatible version of Android Studio.
2. Select the option to create a new Android project.
3. Choose a template that supports Jetpack Compose, such as an Empty Activity template with Compose enabled.
4. Enter the project name, package name, and minimum SDK supported by the application.
5. Allow Android Studio to generate the initial project configuration.
6. Wait for Gradle synchronization to complete.
7. Open the generated Activity and inspect its setContent block.
8. Replace or extend the sample composable with your own UI.
9. Run the app on an emulator or a compatible Android device.

Important project configuration

A Compose project typically needs the Compose compiler configuration, Compose runtime and UI libraries, and the Material components used by the application. Recent Android Gradle Plugin and Kotlin configurations may use the Compose compiler Gradle plugin. The precise configuration depends on the project's Kotlin, Android Gradle Plugin, and Compose versions.

When using Compose libraries, the Compose Bill of Materials (BOM) helps align compatible Compose library versions. Follow the current official setup instructions instead of copying an outdated Gradle configuration into a project with different versions.

Official setup guide: Set Up Jetpack Compose.

15. Declarative UI and Unidirectional Data Flow

Unidirectional data flow (UDF) is a useful design pattern for Compose applications. State flows down to composables, while user events flow upward to a state holder or event handler.

The general flow

1. Display state: A composable receives the current data and displays it.
2. User event: The user clicks a button or enters text.
3. Event handling: The composable sends the event to a callback or ViewModel.
4. State update: The state holder updates the appropriate state.
5. UI refresh: Compose observes the new state and updates the relevant interface.

Example using state and event callbacks

@Composable
fun LikeButton(
    liked: Boolean,
    onLikeClick: () -> Unit
) {
    Button(onClick = onLikeClick) {
        Text(
            text = if (liked) "Liked" else "Like"
        )
    }
}

This composable does not own the liked state. Instead, it receives the current value and a callback from its caller. The caller decides how the state changes.

This approach makes components more reusable and easier to test because their behavior is controlled through parameters.

16. Stateful and Stateless Composables

A stateful composable owns and updates some of its own state. A stateless composable receives the state it needs through parameters and sends user actions back through callbacks.

Both patterns are useful. A small independent toggle may reasonably keep its own state, while a form shared across multiple components may benefit from having its state managed by a parent or ViewModel.

17. Jetpack Compose and Traditional XML Layouts

Jetpack Compose does not mean that all existing XML-based Android development becomes obsolete. Android supports interoperability between Compose and traditional Views, allowing teams to adopt Compose gradually.

The right choice depends on project requirements, existing architecture, team experience, and library compatibility. A mature application can use both systems in the same project.

18. Common Beginner Mistakes

19. Best Practices for Jetpack Compose

• Keep composable functions focused on describing UI.
• Pass values as parameters rather than relying on hidden global state.
• Use observable state for values that should update the interface.
• Hoist state to the lowest common ancestor that needs to read or modify it.
• Use remember for values that need to survive recomposition only.
• Use rememberSaveable for small UI state that should survive supported recreation events.
• Keep business logic and data operations in suitable state holders or application layers.
• Use callbacks to report user events from reusable composables.
• Use LazyColumn and LazyVerticalGrid for large collections.
• Use MaterialTheme to maintain consistent typography, colors, and shapes.
• Test layouts across different window sizes and font settings.
• Use Compose UI testing tools to verify important interactions.

20. Practical Project: Simple Welcome and Counter App

Build a small application that allows a user to enter their name and increment a counter. This project combines composables, declarative UI, state, text input, and button interactions.

Complete Kotlin example

package com.example.composeintro

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    WelcomeCounterScreen()
                }
            }
        }
    }
}

@Composable
fun WelcomeCounterScreen() {
    var name by remember { mutableStateOf("") }
    var count by remember { mutableIntStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = if (name.isBlank()) {
                "Welcome!"
            } else {
                "Welcome, $name!"
            },
            style = MaterialTheme.typography.headlineSmall
        )

        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Enter your name") },
            singleLine = true
        )

        Spacer(modifier = Modifier.height(16.dp))

        Text(text = "Counter: $count")

        Button(onClick = { count++ }) {
            Text(text = "Increase Counter")
        }

        Button(
            onClick = {
                name = ""
                count = 0
            }
        ) {
            Text(text = "Reset")
        }
    }
}

Project explanation

1. The Activity initializes the Compose interface with setContent.
2. WelcomeCounterScreen stores the name and counter as observable state.
3. OutlinedTextField reports user input through onValueChange.
4. The welcome message reflects the current name value.
5. The Increase Counter button updates the counter state.
6. The Reset button clears the name and returns the counter to zero.
7. When either state value changes, Compose updates the UI that depends on it.

Practice improvement: Change the two state variables to rememberSaveable and verify that the entered name and counter are restored after a supported Activity recreation event.

21. Exercises for Practice

1. Create a composable that displays your name and a short description.
2. Create a button that changes its label when clicked.
3. Build a login form with email and password fields.
4. Use state to show or hide a password.
5. Create a reusable profile card that accepts a name and description.
6. Build a list of courses using LazyColumn.
7. Apply Modifier padding, background, and fillMaxWidth to a card.
8. Use rememberSaveable to retain a small UI value across Activity recreation.
9. Separate a screen into stateful and stateless composables.
10. Build a simple dashboard using Material 3 components.

22. Interview Questions and Answers

Q1. What is Jetpack Compose?

Jetpack Compose is a modern Android UI toolkit that uses Kotlin and composable functions to build native user interfaces.

Q2. What is declarative UI?

Declarative UI describes what the interface should display for the current state. The framework updates the rendered interface when relevant state changes.

Q3. What does the @Composable annotation do?

It marks a function as a composable function that participates in the Compose UI composition process.

Q4. What is recomposition?

Recomposition is the process of re-executing affected composable functions when observed state or relevant inputs change.

Q5. What is the difference between remember and rememberSaveable?

remember retains a value across recompositions while its composable remains in the Composition. rememberSaveable can also restore supported values across common recreation events and saved-state restoration.

Q6. What is mutableStateOf?

It creates observable mutable state. Changes to the state can schedule recomposition for composables that read it.

Q7. What is Modifier in Compose?

Modifier is used to configure a composable's layout, appearance, interaction, and other behavior, such as padding, sizing, background, and clicks.

Q8. What is state hoisting?

State hoisting moves state ownership to a caller or another suitable state holder, allowing child composables to receive values and emit events through callbacks.

Q9. What is unidirectional data flow?

It is a pattern in which state flows down to UI components and events flow upward to the code responsible for updating state.

Q10. Can Jetpack Compose work with XML layouts?

Yes. Compose can be introduced incrementally into View-based applications, and traditional Android Views can be embedded in Compose when required.

Q11. What is the purpose of setContent?

In a Compose-enabled Activity, setContent establishes the composable content that renders the Activity's interface.

Q12. Why should network calls not be placed directly in a composable body?

Composable functions may run repeatedly during recomposition. Side effects should be handled using appropriate effect APIs, ViewModels, or other suitable application layers.

Q13. What is the difference between a stateful and stateless composable?

A stateful composable owns state internally. A stateless composable receives its state as parameters and reports events through callbacks.

Q14. Which composable is useful for displaying a long scrolling list?

LazyColumn is commonly used for vertically scrolling lists because it composes and lays out items as needed.

Q15. What are the benefits of Jetpack Compose?

Benefits include reusable UI components, concise Kotlin-based UI code, state-driven updates, easier UI composition, and support for modern Android design patterns.

23. Quick Revision Notes

• Jetpack Compose: Modern toolkit for building native Android interfaces with Kotlin.
• Declarative UI: Describes the UI based on current state.
• @Composable: Marks a composable function.
• Composition: Builds a description of the UI by executing composable functions.
• Recomposition: Re-executes affected composables after relevant state changes.
• Modifier: Configures layout, appearance, interaction, and behavior.
• mutableStateOf: Creates observable mutable state.
• remember: Retains a value across recompositions while in the Composition.
• rememberSaveable: Helps restore supported UI state across common recreation events.
• State hoisting: Moves state ownership to a caller or state holder.
• UDF: State flows down; events flow up.
• Material 3: Provides components and design-system support.
• setContent: Sets the Compose UI content in a Compose-enabled Activity.
• LazyColumn: Displays a vertically scrolling list efficiently.

24. Conclusion

Jetpack Compose introduces a declarative approach to Android UI development. Instead of manually updating individual views whenever data changes, developers describe the interface through composable functions and connect those functions to observable state.

Understanding composables, modifiers, composition, recomposition, state management, and unidirectional data flow provides a strong foundation for building maintainable Android applications. By practicing with text fields, buttons, reusable cards, lists, and Material 3 components, beginners can gradually develop more complex interfaces and adopt modern Android development patterns.

Useful Learning Links:

• Visit JustAcademy Homepage
• Explore the Android App Development Course
• Register for a Course Demo
• Official Jetpack Compose Documentation
• State and Jetpack Compose
• Compose UI Architecture